<template>
	<view>
		<view class="detail" v-if="info">
			<view>
				<swiper class="swiper_box" @change="bindchange">
					<swiper-item v-for="(item,index) in info.images">
						<image :src="cdn(item)" class="swiper_img" mode="aspectFill" @click="previewImages(index)" />
					</swiper-item>
				</swiper>
				<view class="tips z-padding-tb-8 z-padding-lr-16 z-radius-32 z-font-24">{{ current + 1 }}/{{ info.images.length }}</view>
			</view>
			<view class="skillinfo z-margin-t-24 z-radius-16">
				<view class="skillinfo_top z-padding-32">
					<view style="display: flex">
						<view class="z-font-w z-font-32 z-margin-r-24">{{ info.name }}</view>
						<view class="time z-font-24">
							<view class="time_one z-padding-tb-8 z-padding-lr-16 z-radius-tl-8 z-radius-bl-8">最早可约</view>
							<view class="time_two z-padding-tb-8 z-padding-lr-16 z-radius-tr-8 z-radius-br-8">{{ tool.formatTime(info.skillTime, 'mm-dd HH:MM') }}</view>
						</view>
					</view>
					<view class="followed z-flex z-radius-4 z-font-22" v-if="info.followState" @click="collect">已关注</view>
					<view class="follow z-flex z-radius-4 z-font-22" v-else @click="collect">关注</view>
				</view>
				<view class="skillinfo_tips z-padding-b-32 z-padding-lr-32">
					<view class="skillinfo_tips_itme z-radius-8 z-font-24 z-flex z-padding-lr-16 text_999">
						{{ info.sex === 1 ? '男' : '女' }}
					</view>
					<view class="skillinfo_tips_itme z-radius-8 z-font-24 z-flex z-padding-lr-16 text_999">
						{{ info.nation }}
					</view>
					<view class="skillinfo_tips_itme z-radius-8 z-font-24 z-flex z-padding-lr-16 text_999">
						{{ info.edu }}
					</view>
					<view class="skillinfo_tips_itme z-radius-8 z-font-24 z-flex z-padding-lr-16 text_999">{{ info.age }}岁</view>
					<view class="z-flex-1"></view>
					<view class="z-font-24 text_999" v-if="!info.shopname">{{ info.distance }}km</view>
				</view>
				<view class="shopbox z-padding-b-32 z-padding-lr-32" v-if="info.shopname">
					<view class="shopname z-radius-8 z-padding-lr-8" @click="shopTap">
						<image src="../../static/index/shop.png" class="shopimg" mode="" />
						<view class="z-font-22 z-margin-lr-8">{{ info.shopname }}</view>
						<u-icon name="arrow-right" size="10"></u-icon>
					</view>
					<view class="z-flex-1"></view>
					<view class="z-font-24 text_999">{{ info.distance }}km</view>
				</view>
				<view class="skillinfo_btoom z-padding-32" @click="skillAuth">
					<view class="skillinfo_btoom_item">
						<image src="../../static/index/smrz.png" class="skillinfo_btoom_img" mode="" />
						<view class="z-font-22 z-margin-l-8">实名认证</view>
					</view>
					<view class="skillinfo_btoom_item">
						<image src="../../static/index/zgz.png" class="skillinfo_btoom_img" mode="" />
						<view class="z-font-22 z-margin-l-8">从业资格证</view>
					</view>
					<view class="skillinfo_btoom_item">
						<image src="../../static/index/jkz.png" class="skillinfo_btoom_img" mode="" />
						<view class="z-font-22 z-margin-l-8">健康证</view>
					</view>
					<view class="skillinfo_btoom_item text_999 z-font-22">
						<view class="z-font-22 z-margin-l-8">查看</view>
						<u-icon name="arrow-right" size="10"></u-icon>
					</view>
				</view>
			</view>
			<view class="z-font-w z-margin-lr-32 z-margin-t-40 z-margin-b-24">服务项目</view>
			<view class="scroll z-padding-lr-32">
				<block v-for="(val,index) in info.goodsList">
					<service :info="val" :type="2" @serviceTap="serviceTap"></service>
				</block>
			</view>
			<view class="comment_box" v-if="num.totalNum>0">
				<view class="comment_box_top z-margin-t-32 z-margin-b-24">
					<view class="z-font-w">评价({{ num.totalNum }})</view>
					<view class="text_999 z-font-24" @click="comment">
						好评率{{ num.goodPercent * 100 }}%
						<u-icon name="arrow-right" size="10"></u-icon>
					</view>
				</view>
				<block v-for="(item,index) in list" v-if="index < 2">
					<comment :info="item"></comment>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
import http from '../../utils/http';
import service from "@/component/service.vue"
import comment from "@/component/comment.vue"
export default {
	components:{
		service,comment
	},
	data() {
		return {
			current: 0,
			alllength: 1,
			mylist: [{}, {}, {}, {}],
			value: 5,
			skill_id: '',
			info: '',
			num: '',
			list: []
		};
	},
	onLoad(options) {
		console.log(options,'!!???')
		this.skill_id = options.skill_id;
		this.getInfo();
	},
	methods: {
		previewImages(e) {
			this.util.previewImage(this.info.images, e);
		},
		skillAuth() {
			this.util.skip('/service/skillauth/skillauth?skill_id=' + this.skill_id);
		},
		shopTap() {
			this.util.skip('/service/shopdetail/shopdetail?shop_id=' + this.info.shop_id);
		},
		collect() {
			if (!uni.getStorageSync('token')) {
				this.util.skip('/service/login/login');
				return;
			}
			http.get('follow/handlefollow', {
				follow_id: this.skill_id,
				type: 0,
				state: this.info.followState ? 0 : 1
			}).then((res) => {
				this.info.followState = this.info.followState ? 0 : 1;
				this.info = this.info
			});
		},
		serviceTap(e) {
			this.util.skip('/service/servedetail/servedetail?id=' + e.id + '&skill_id=' + this.skill_id);
		},
		lowerthreshold() {
			console.log('我到底了');
		},
		bindchange(event) {
			console.log(event)
			this.current = event.detail.current
		},
		comment() {
			this.util.skip('/service/comments/comments?type=skill&id=' + this.skill_id);
		},
		getInfo() {
			http.get(
				'skill/skillinfo',
				{
					id: this.skill_id,
					lng: uni.getStorageSync('address').lng,
					lat: uni.getStorageSync('address').lat
				},
				true
			).then((res) => {
				let eduArr = ['小学文化', '初中', '高中', '大专', '本科', '硕士', '博士'];
				res.data.edu = eduArr[res.data.edu];
				res.data.images = res.data.images ? res.data.images : [];
				res.data.images.unshift(res.data.image);
				this.info = res.data
			});
			http.get('comment/getlist', {
				skill_id: this.skill_id
			}).then((res) => {
				this.list = res.data
			});
			http.get('comment/totalcomment', {
				skill_id: this.skill_id,
				type: 'skill'
			}).then((res) => {
				this.num = res.data
			});
		}
	}
};
</script>

<style>
	page {
		background:#EDF1F4;
	}
.swiper_box {
	height: 750rpx;
	position: relative;
}
.swiper_img {
	width: 100vw;
	height: 750rpx;
}
.tips {
	position: absolute;
	right: 50rpx;
	color: #fff;
	background: rgba(0, 0, 0, 0.5);
	top: 650rpx;
}
.skillinfo {
	background: #ffffff linear-gradient(90deg, #f0fff3 0%, #edfdde 100%);
	width: 686rpx;
	margin: 0 auto;
	box-sizing: border-box;
}
.skillinfo_top {
	display: flex;
	background-color: #fff;
	justify-content: space-between;
	align-items: center;
	border-radius: 16rpx 16rpx 0 0;
}
.time {
	color: var(--maingreencolor);
	display: flex;
}
.time_one {
	background: #e8f7ec;
}
.time_two {
	background: #f3fbf5;
}
.van-button {
	border-radius: 10rpx !important;
}
.skillinfo_tips {
	background-color: #fff;
	display: flex;
	align-items: center;
}
.skillinfo_tips_itme {
	background-color: #f5f7f9;
	height: 40rpx;
}
.skillinfo_tips_itme:nth-child(n + 2) {
	margin-left: 20rpx;
}
.shopbox {
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.shopname {
	display: flex;
	align-items: center;
	background-color: #fcf7ee;
	color: #dbac54;
	height: 40rpx;
}
.shopimg {
	width: 25rpx;
	height: 25rpx;
}
.skillinfo_btoom {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.skillinfo_btoom_img {
	width: 20rpx;
	height: 20rpx;
}
.skillinfo_btoom_item {
	display: flex;
	align-items: center;
}
.scroll {
}

.comment_box {
	width: 90vw;
	margin: 0 auto;
	box-sizing: border-box;
}
.comment_box_top {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.comment_item {
	box-sizing: border-box;
}
.comment_item_top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.comment_item_top_left {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.comment_item_top_left_text {
	display: flex;
	flex-direction: column;
}

.comment_item_img {
	width: 66rpx;
	height: 66rpx;
	border-radius: 50%;
}
.scroll_box {
	width: 600rpx;
	white-space: nowrap;
}
.scroll_box_imgbox {
	display: flex;
}
.scroll_box_img {
	width: 190rpx;
	height: 190rpx;
}
.scroll_box_img:nth-child(n + 2) {
	margin-left: 30rpx;
}

.follow {
	background: #62cb81;
	width: 112rpx;
	height: 56rpx;
	color: #fff;
}

.followed {
	border: 1px solid #edeef1;
	box-sizing: border-box;
	width: 112rpx;
	height: 56rpx;
	color: #a4a9b7;
}
</style>
